<template>
    <a-render>
        <template #search>
          <SearchForm 
            :span="6" 
            :fields="req" 
            :list="searchFormJSON" 
            :toggle-span="[12, 12]"
            :show-toggle="false"
            @search="callbackSearch"
            @reset="callbackReset"
          ></SearchForm>
        </template>
        <Table ref="tabelRef" :data="dataList" :column="column" :operation="false" @page="changePage">
          <template #left>
            <a-button type="primary" @click="openModal('openLiterature')">新增分类</a-button>
          </template>
          <template #status="data">
            <Switch v-model="data.row.category_status" :checked-value="1" :unchecked-value="0" :params="data.row" :before-change="useStatusLiterature"/>
          </template>
          <template #operation="data">
            <a-button type="link" @click="openModal('openLiterature', data.row)">编辑</a-button>
            <a-button type="link" danger @click="useDeleteLiterature(data.row)">删除</a-button>
          </template>
        </Table>
    </a-render>
    <ModalForm v-model:open="state.openLiterature" v-if="state.openLiterature" :row="state.row" @ok="getList"  />
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
// 组件
import SearchForm from "@/components/searchForm/search.vue"
import Table from "@/components/table/index.vue"
import Switch from "@/components/control/switch/index.vue"
// modal
import ModalForm from "../component/form.vue"
// 搜索和表格配置
import { column } from "./column"
import { useSearchForm } from "./search"
// hook
import { useTable } from "@/hook/index"
import { useLiterature } from "./use-literature"

const tabelRef = ref(null)
const { uesSetTotal, usePage, useSize, useSearch, useReset } = useTable(tabelRef)
const { useGetLiteratureList, useDeleteLiterature, useStatusLiterature, dataList } = useLiterature()
// 搜索配置项
const { searchFormJSON } = useSearchForm()
// 请求参数
const req = reactive({
  pageIndex: usePage,
  pageSize: useSize,
  category_name: "",
  status: ""
})

const handelOk = () => {
  console.log('异步请求成功，回调')
}

const state = reactive({
  row: {},
  openLiterature: false,
})

const openModal = (key, row = {}) => {
  state.row = row
  state[key] = true
}

/**
 * 列表数据模拟 
 */
const getList = () => {
  useGetLiteratureList(req).then(params => { // function，接收参数
    uesSetTotal(params?.content?.total)
  })
}
/**
 * 分页
 */
const changePage = (page, size) => {
  req.pageIndex = page
  req.pageSize = size
  getList()
}

/**
 * 搜索
 */
const callbackSearch = () => {
  useSearch()
  getList()
}
/**
 * 设置
 */
const callbackReset = () => {
  useReset()
  getList()
}

onMounted(() => {
  getList()
})
</script>